<template>
  <form-item-wrapper :designer="designer" :field="field" :rules="rules" :design-state="designState" :parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList" :sub-form-row-index="subFormRowIndex" :sub-form-col-index="subFormColIndex"
                     :sub-form-row-id="subFormRowId">

    <template v-if="designer">
      <el-button type="default" @click="showFill">填写</el-button>
    </template>
    <template>
      设定结果：{{fieldModel.g}} 指标分级结果：{{fieldModel.grade}}
    </template>
    <el-dialog :title="i18nt('designer.setting.tableColEdit')" :visible.sync="dialogVisible" v-if="dialogVisible" :show-close="true" class="small-padding-dialog" v-dialog-drag :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" width="900px">

      <table class="function-table" style="width:800px;">
        <tr>
          <td>评估类型</td>
          <td>适应性</td>
          <td>权重</td>
          <td>最大值</td>
          <td>最小值</td>
          <td>调整系数</td>
          <td>参数</td>
          <td>无量纲模型</td>
        </tr>
        <tr v-for="(item,index) in calcList['自动评估']" :key="'自动评估'+index">
          <td :rowspan="calcList['自动评估'].length" v-if="index==0">自动评估</td>
          <td>
            <el-switch ref="fieldEditor" v-model="item.yesOrNo" :active-value="true" @change="yesOrNoChange(item)"></el-switch>{{item.yesOrNo?'是':'否'}}
          </td>
          <td width="100px" align="center">
            <template v-if="index>0">
              <el-input-number v-model="item.q" controls-position="right" style="width:100px" :min="0" :max="1" :step="0.01" :disabled="!item.yesOrNo"></el-input-number>
            </template>
            <template v-else>
              /
            </template>
          </td>
          <td width="100px" align="center">
            <template v-if="index>0">
              <el-input-number v-model="item.max_m" controls-position="right" style="width:100px" :min="0" :max="1" :step="0.001" :disabled="!item.yesOrNo"></el-input-number>
            </template>
            <template v-else>
              /
            </template>
          </td>
          <td width="100px" align="center">
            <template v-if="index>0">
              <el-input-number v-model="item.min_m" controls-position="right" style="width:100px" :min="0" :max="1" :step="0.001" :disabled="!item.yesOrNo"></el-input-number>
            </template>
            <template v-else>
              /
            </template>
          </td>
          <td width="100px" align="center">
            <template v-if="index>0">
              <el-input-number v-model="item.d" controls-position="right" style="width:100px" :min="0" :max="1" :step="0.01" :disabled="!item.yesOrNo"></el-input-number>
            </template>
            <template v-else>
              /
            </template>
          </td>
          <td>
            <el-input v-model="item.x" style="width:100px" :disabled="!item.yesOrNo"/>
          </td>
          <td>
            {{calcType.find(x=>x.value== item.calcType).label}}
            <!-- <el-select v-model="item.calcType" placeholder="">
              <el-option v-for="(type,index) in calcType" :key="index" :label="type.label" :value="type.value" :disabled="!item.yesOrNo"></el-option>
            </el-select> -->
          </td>
        </tr>
        <tr v-for="(item,index) in calcList['主观评估']" :key="'主观评估'+index">
          <td :rowspan="calcList['主观评估'].length" v-if="index==0">主观评估</td>
          <td>
            <el-switch ref="fieldEditor" v-model="item.yesOrNo" :active-value="true" @change="yesOrNoChange(item)"></el-switch>{{item.yesOrNo?'是':'否'}}
          </td>

          <td align="center" width="100px">
            <el-input-number v-model="item.q" controls-position="right" style="width:100px" :min="0" :max="1" :step="0.01" :disabled="!item.yesOrNo"></el-input-number>
          </td>
          <td :colspan="index==0?1:5" align="center">
            /
          </td>
          <td v-if="index==0" align="center" width="100px">
            <template v-if="index==0">
              /
            </template>
          </td>
          <td v-if="index==0" align="center" width="100px">
            <template v-if="index==0">
              /
            </template>
          </td>
          <!-- <td v-if="index==0" align="center" width="100px">
            <el-input v-model="item.d" style="width:100px" />
          </td> -->

          <td v-if="index==0">
            <el-input v-model="item.x" style="width:100px" :disabled="!item.yesOrNo" />
          </td>
          <td v-if="index==0" align="center" width="100px" :disabled="!item.yesOrNo">
            {{calcType.find(x=>x.value== item.calcType).label}}
            <!-- <el-select v-model="item.calcType" placeholder="">
              <el-option v-for="(type,index) in calcType" :key="index" :label="type.label" :value="type.value"></el-option>
            </el-select> -->
          </td>
        </tr>
      </table>

      <div slot="footer" class="dialog-footer">
        <el-button size="large" type="primary" @click="colSubmit">{{i18nt('designer.hint.confirm')}}</el-button>
        <el-button size="large" @click="dialogVisible = false">{{i18nt('designer.hint.cancel')}}</el-button>
      </div>
    </el-dialog>
  </form-item-wrapper>
</template>

<script>
import FormItemWrapper from './form-item-wrapper'
import emitter from '@/utils/emitter'
import i18n, { translate } from "@/utils/i18n";
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";

export default {
  name: "function-widget",
  componentName: 'FieldWidget',  //必须固定为FieldWidget，用于接收父级组件的broadcast事件
  mixins: [emitter, fieldMixin, i18n],
  props: {
    field: Object,
    parentWidget: Object,
    parentList: Array,
    indexOfParentList: Number,
    designer: Object,

    designState: {
      type: Boolean,
      default: false
    },

    subFormRowIndex: { /* 子表单组件行索引，从0开始计数 */
      type: Number,
      default: -1
    },
    subFormColIndex: { /* 子表单组件列索引，从0开始计数 */
      type: Number,
      default: -1
    },
    subFormRowId: { /* 子表单组件行Id，唯一id且不可变 */
      type: String,
      default: ''
    },

  },
  components: {
    FormItemWrapper,
  },
  inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel','getOptionData'],
  data() {
    return {
      oldFieldValue: null, //field组件change之前的值
      fieldModel: null,
      rules: [],
      dialogVisible: false,
      calcList: {
        "自动评估": [],
        "主观评估": []
      },
      calcObj: {
        calcType: 1,
        d: 0,
        q: 0,
        g: 0,
        grade: "",
        max_m: 0,
        min_m: 0,
        x: "",
        yesOrNo: false,
        yesOrNo_g: false
      },
      calcType: [
        { label: '指标分级', value: 1 },
        { label: '成本型', value: 2 },
        { label: '效益型', value: 3 },
        { label: '成败型', value: 4 },
        { label: '手工评估', value: 5 },
      ]
    }
  },
  computed: {

  },
  beforeCreate() {
    /* 这里不能访问方法和属性！！ */
  },

  created() {
    /* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
       需要在父组件created中初始化！！ */
    // this.initOptionItems()
    this.initFieldModel()
    this.initFunctionFieldModel();
    this.registerToRefList()
    this.initEventHandler()
    this.buildFieldRules()

    this.handleOnCreated()

  },
  watch: {
    deep: true,
    handler: function (val) {
      this.calcList = val;
    }
  },
  mounted() {
    this.handleOnMounted()


  },

  beforeDestroy() {
    this.unregisterFromRefList()
  },

  methods: {
    initFunctionFieldModel() {

      if (!this.fieldModel || !this.fieldModel['自动评估']) {
        this.calcList['自动评估'].push({ ...this.getCalcObj(), calcType: this.calcType.find(x => x.label == '指标分级').value })
        this.calcList['自动评估'].push({ ...this.getCalcObj(), calcType: this.calcType.find(x => x.label == '成本型').value })
        this.calcList['自动评估'].push({ ...this.getCalcObj(), calcType: this.calcType.find(x => x.label == '效益型').value })


        this.calcList['主观评估'].push({ ...this.getCalcObj(), calcType: this.calcType.find(x => x.label == '成败型').value })
        this.calcList['主观评估'].push({ ...this.getCalcObj(), calcType: this.calcType.find(x => x.label == '手工评估').value })
        this.fieldModel = this.calcList;
      } else {
        this.calcList = this.fieldModel;
      }

    },
    getCalcObj: function () {
      return JSON.parse(JSON.stringify(this.calcObj));
    },
    yesOrNoChange: function (item) {
      if (item.yesOrNo) item.yesOrNo_g = 1;
      else item.yesOrNo_g = 0;
    },
    showFill: function () {
      this.dialogVisible = true;
    },
    colSubmit: function () {
      this.fieldModel = this.calcList;
      let optionData=this.getOptionData();
      if(optionData.functionCalculate){
        let fieldData=[...this.fieldModel['自动评估'],...this.fieldModel['主观评估']];
        optionData.functionCalculate(fieldData,this.calculateFinish);
      }else{
        this.dialogClose();
      }
    },
    calculateFinish(res){
      console.log("把计算结果输出")
      this.dialogVisible = false;
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../../../styles/global.scss'; //* form-item-wrapper已引入，还需要重复引入吗？ *//

.function-table {
  border-collapse: collapse;
  td {
    border: solid 1px white;
    text-align: center;
    color: #dddddd;
  }
}
</style>
